<template>
  <div>
    <div class="right-container">
      <div class="right-container-stage">
        <div id="sub-app">
          <!-- <a-alert style="margin:8px 16px;text-align:left;" message="提示用的文字区域" type="info" close-text="x" /> -->
          <div class="page-body">
            <div class="trashTop">
              <div class="topContain">
                <a href="javascript:void(0);" class="trashTitle">
                  <b>回收站</b>
                </a>
                <div class="btnList">
                  <a-space>
                    <a-button shape="size" icon="redo" />
                    <a-button type="primary">还原项目</a-button>
                  </a-space>
                </div>
              </div>
              <div class="stepBar">
                <!-- <a-icon type="question-circle" /> -->
                <a-input placeholder="输入项目名称或英文编码智能识别" style="width:400px">
                  <a-icon slot="addonAfter" type="search" />
                  <a-tooltip slot="suffix" title="Extra information">
                    <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
                  </a-tooltip>
                </a-input>
              </div>
            </div>
            <div class="pageContain">
              <div class="projectContain" v-for="item in delProject" :key="item.id" :class="activeClass == 1 ? 'active' : ''" @click="handleaActive(1)">
                <img :src="item.images" alt="" style="height:120px">
                <div class="projectWrap">
                  <div class="projectTitle">
                    <p class="title">{{item.name}}</p>
                    <p class="projectId">{{item.code}}</p>
                  </div>
                  <div class="projectDes">
                    <p>创建日期 {{item.createTime | date}}</p>
                    <p>个案数量 {{item.personalCase}}人</p>
                    <p>服务记录 {{item.longtimeServicePerson}}份</p>
                    <p>参与社工 74人</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getDelProject } from '@/api/list.js'
export default {
  data() {
    return {
      activeClass: '-1',
      delProject: [],

    };
  },
  created() {
    this.getDelProjectItem();
  },
  mounted() {
  },
	filters:{
		date(val){
			return new Date(val).toLocaleString()
		}
	},
  methods: {
    handleaActive(k) {
      this.activeClass = k;
    },
    getDelProjectItem() {
      getDelProject().then(res => {
        // console.log(res);
        this.delProject = res.data;
        console.log(this.delProject);

      })
    }
  }
}
</script>

<style lang="less" scoped>
.trashTop {
  width: 100%;
  clear: both;
  margin-bottom: 24px;
  .topContain {
    width: auto;
    height: 50px;
    line-height: 50px;
    .trashTitle {
      font-size: 28px;
      letter-spacing: 1.14px;
      color: #111;
      text-decoration: none !important;
      display: inline-block;
      padding-right: 10px;
    }
    .btnList {
      float: right;
    }
  }
}

.pageContain {
  display: flex;
  flex-wrap: wrap;
  .projectContain {
    margin: 8px;
    width: 200px;
    border: 1px solid #555555;
    box-sizing: border-box;
    img {
      width: 100%;
    }

    .projectWrap {
      padding: 8px;

      .projectTitle {
        .title {
          font-weight: bold;
          font-size: 16px;
          margin-bottom: 0;
        }

        .projectId {
          font-size: 14px;
        }
      }

      .projectDes {
        border-top: 1px solid #555555;
        padding-top: 5px;
        p {
          margin-bottom: 0;
          color: #555555;
        }
      }
    }
  }
  .active {
    border: 1px solid #ee6f2d;
    -webkit-box-shadow: #ee6f2d 0px 0px 10px;
    -moz-box-shadow: #ee6f2d 0px 0px 10px;
    box-shadow: #ee6f2d 0px 0px 10px;
  }
}
</style>